WebXR Tabamustesti Haldur: Kiirtejälitusüsteemi rakendamine kaasahaaravateks kogemusteks

Liitreaalsuse (AR) ja virtuaalreaalsuse (VR) tehnoloogiate esiletõus on avanud põnevaid uusi võimalusi kaasahaaravate ja interaktiivsete digitaalsete kogemuste loomiseks. WebXR, JavaScripti API VR ja AR võimalustele ligi pääsemiseks veebibrauserites, võimaldab arendajatel kogu maailmas neid kogemusi luua paljudel seadmetel. Kaasahaaravate WebXR-kogemuste loomise võtmekomponendiks on võime suhelda virtuaalse keskkonnaga. Just siin tulevad mängu WebXR Tabamustesti Haldur ja kiirtejälitus.

Mis on kiirtejälitus ja miks see oluline on?

Kiirtejälitus, WebXR-i kontekstis, on tehnika, mida kasutatakse virtuaalse kiirte (sirge joone) ristumise määramiseks AR-süsteemi poolt tuvastatud reaalse maailma pinnaga või VR-keskkonna virtuaalse objektiga. Mõelge sellele kui laserosuti suunamisele oma ümbrusesse ja nägemisele, kuhu see tabab. WebXR Tabamustesti Haldur pakub tööriistu nende kiirtejälituste teostamiseks ja tulemuste hankimiseks. See teave on ülioluline mitmesuguste interaktsioonide jaoks, sealhulgas:

• Objekti paigutamine: Võimaldades kasutajatel paigutada virtuaalseid objekte reaalmaailma pindadele, näiteks virtuaalse tooli oma elutuppa (AR). Kujutage ette, et kasutaja Tokyos kaunistab oma korterit virtuaalselt enne mööbli ostmist.
• Sihtimine ja valik: Võimaldades kasutajatel valida virtuaalseid objekte või suhelda kasutajaliidese elementidega virtuaalse osuti või käe abil (AR/VR). Kujutage ette Londoni kirurgi, kes kasutab AR-i, et kuvada patsiendile anatoomilist teavet, valides ülevaatamiseks konkreetseid piirkondi.
• Navigatsioon: Kasutaja avatari liigutamine läbi virtuaalmaailma, osutades asukohale ja juhendades teda sinna liikuma (VR). Pariisi muuseum võiks kasutada VR-i, et külastajad saaksid navigeerida läbi ajalooliste eksponaatide.
• Žestide tuvastamine: Tabamustesti ja käejälgimise kombineerimine kasutaja žestide tõlgendamiseks, näiteks suumimine näppude kokku surumisega või kerimine pühkimisega (AR/VR). Seda saaks kasutada Sydney koostööpõhises disainikoosolekul, kus osalejad manipuleerivad virtuaalsete mudelitega koos.

WebXR Tabamustesti Halduri mõistmine

WebXR Tabamustesti Haldur on oluline osa WebXR API-st, mis hõlbustab kiirtejälitust. See pakub meetodeid tabamustesti allikate loomiseks ja haldamiseks, mis määravad kiirte alguspunkti ja suuna. Seejärel kasutab haldur neid allikaid tabamustestide teostamiseks reaalse maailma (AR-is) või virtuaalse maailma (VR-is) vastu ja tagastab teabe kõigi ristumiste kohta. Põhikontseptsioonid hõlmavad:

• XRFrame: XRFrame esindab XR-stseeni hetkepilti, sealhulgas vaataja asendit ning kõiki tuvastatud tasandeid või omadusi. Tabamustestid tehakse XRFrame'i vastu.
• XRHitTestSource: Esindab kiirtejälituse allikat. See määratleb alguspunkti (kus kiir algab) ja suuna (kuhu kiir osutab). Tavaliselt loote ühe XRHitTestSource'i sisendmeetodi kohta (nt kontroller, käsi).
• XRHitTestResult: Sisaldab teavet eduka tabamuse kohta, sealhulgas ristumispunkti asendit (positsioon ja orientatsioon) ja kaugust kiirte alguspunktist.
• XRHitTestTrackable: Esindab jälgitavat funktsiooni (nagu tasand) reaalses maailmas.

Põhilise tabamustesti süsteemi rakendamine

Käime läbi sammud, et rakendada JavaScripti abil põhilist WebXR tabamustesti süsteemi. See näide keskendub AR-objekti paigutamisele, kuid põhimõtteid saab kohandada teiste interaktsioonistsenaariumide jaoks.

1. samm: WebXR-seansi ja tabamustesti toe taotlemine

Esiteks peate taotlema WebXR-seansi ja veenduma, et 'hit-test' funktsioon on lubatud. See funktsioon on vajalik Tabamustesti Halduri kasutamiseks.

            
async function initXR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['hit-test'],
    });

    xrSession.addEventListener('end', () => {
      console.log('XR session ended');
    });

    // Initialize your WebGL renderer and scene here
    initRenderer();

    xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, renderer.getContext())
    });

    xrReferenceSpace = await xrSession.requestReferenceSpace('local');
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrReferenceSpace
    });

    xrSession.requestAnimationFrame(renderLoop);

  } catch (e) {
    console.error('WebXR failed to initialize', e);
  }
}

            

              
                Copy
              
            
          

Selgitus:

• `navigator.xr.requestSession('immersive-ar', ...)`: Taotleb kaasahaaravat AR-seanssi. Esimene argument määratleb seansi tüübi (AR-i jaoks 'immersive-ar', VR-i jaoks 'immersive-vr').
• `requiredFeatures: ['hit-test']`: Oluliselt taotleb 'hit-test' funktsiooni, mis lubab Tabamustesti Halduri.
• `xrSession.requestHitTestSource(...)`: Loob XRHitTestSource'i, määratledes kiirte alguspunkti ja suuna. Selles põhinäites kasutame 'viewer' referentsruumi, mis vastab kasutaja vaatenurgale.

2. samm: Renderdusringi loomine

Renderdusring on teie WebXR-rakenduse süda. See on koht, kus te uuendate stseeni ja renderdate iga kaadri. Renderdusringis teostate tabamustesti ja uuendate oma virtuaalobjekti positsiooni.

            
function renderLoop(time, frame) {
  xrSession.requestAnimationFrame(renderLoop);

  const xrFrame = frame;
  const xrPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (xrPose) {
    const hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);

    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const hitPose = hit.getPose(xrReferenceSpace);

      // Update the position and orientation of your virtual object
      object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
      object3D.visible = true; // Make the object visible when a hit is found
    } else {
      object3D.visible = false; // Hide the object if no hit is found
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Selgitus:

• `xrFrame.getHitTestResults(xrHitTestSource)`: Teostab tabamustesti kasutades eelnevalt loodud XRHitTestSource'i. See tagastab massiivi XRHitTestResult objektidest, mis esindavad kõiki leitud ristumisi.
• `hitTestResults[0]`: Võtame esimese tabamustulemuse. Keerulisemates stsenaariumides võiksite läbi käia kõik tulemused ja valida kõige sobivama.
• `hit.getPose(xrReferenceSpace)`: Hõlmab tabamuse asendi (positsiooni ja orientatsiooni) määratud referentsruumis.
• `object3D.position.set(...)` ja `object3D.quaternion.set(...)`: Uuendavad teie virtuaalobjekti (object3D) positsiooni ja orientatsiooni vastavaks tabamuse asendile. See paigutab objekti ristumispunkti.
• `object3D.visible = true/false`: Kontrollib virtuaalobjekti nähtavust, muutes selle nähtavaks ainult siis, kui tabamus on leitud.

3. samm: 3D-stseeni seadistamine (näide Three.js-iga)

See näide kasutab populaarset JavaScripti 3D-teeki Three.js lihtsa stseeni loomiseks kuubikuga. Saate seda kohandada, et kasutada teisi teeke, nagu Babylon.js või A-Frame.

            
let scene, camera, renderer, object3D;
let xrSession, xrReferenceSpace, xrHitTestSource;

function initRenderer() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true; // Enable WebXR
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1); // 10cm cube
  const material = new THREE.MeshNormalMaterial();
  object3D = new THREE.Mesh(geometry, material);
  object3D.visible = false; // Initially hide the object
  scene.add(object3D);

  renderer.setAnimationLoop(() => { /* No animation loop here. WebXR controls it.*/ });
  renderer.xr.setSession(xrSession);

  camera.position.z = 2; // Move the camera back
}

// Call initXR() to start the WebXR experience
initXR();

            

              
                Copy
              
            
          

Tähtis: Veenduge, et Three.js teek on teie HTML-faili lisatud:

            


            

              
                Copy
              
            
          

Edasijõudnud tehnikad ja optimeerimised

Ülaltoodud põhiline rakendus loob aluse WebXR-i tabamustestiks. Siin on mõned täiustatud tehnikad ja optimeerimised, mida tasub kaaluda keerukamate kogemuste loomisel:

1. Tabamustesti tulemuste filtreerimine

Mõnel juhul võiksite tabamustesti tulemusi filtreerida, et arvesse võtta ainult teatud tüüpi pindu. Näiteks võiksite lubada objekti paigutamist ainult horisontaalsetele pindadele (põrandad või lauad). Seda saate saavutada, uurides tabamuse asendi normaali vektorit ja võrreldes seda ülesvektoriga.

            
if (hitTestResults.length > 0) {
  const hit = hitTestResults[0];
  const hitPose = hit.getPose(xrReferenceSpace);

  // Check if the surface is approximately horizontal
  const upVector = new THREE.Vector3(0, 1, 0); // World up vector
  const hitNormal = new THREE.Vector3();
  hitNormal.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z);
  hitNormal.applyQuaternion(camera.quaternion); // Rotate the normal to world space

  const dotProduct = upVector.dot(hitNormal);

  if (dotProduct > 0.9) { // Adjust the threshold (0.9) as needed
    // Surface is approximately horizontal
    object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    object3D.visible = true;
  } else {
    object3D.visible = false;
  }
}

            

              
                Copy
              
            
          

2. Ajutiste sisendallikate kasutamine

Keerukamate sisendmeetodite, näiteks käejälgimise korral kasutatakse tavaliselt ajutisi sisendallikaid. Ajutised sisendallikad esindavad ajutisi sisendsündmusi, nagu sõrme puudutus või käe žest. WebXR Input API võimaldab teil neile sündmustele ligi pääseda ja luua tabamustesti allikaid kasutaja käe positsiooni alusel.

            
xrSession.addEventListener('selectstart', (event) => {
  const inputSource = event.inputSource;
  const targetRayPose = event.frame.getPose(inputSource.targetRaySpace, xrReferenceSpace);

  if (targetRayPose) {
    // Create a hit test source from the target ray pose
    xrSession.requestHitTestSourceForTransientInput({ targetRaySpace: inputSource.targetRaySpace, profile: inputSource.profiles }).then((hitTestSource) => {
       const hitTestResults = event.frame.getHitTestResults(hitTestSource);
       if (hitTestResults.length > 0) {
         const hit = hitTestResults[0];
         const hitPose = hit.getPose(xrReferenceSpace);

         // Place an object at the hit location
         const newObject = new THREE.Mesh(new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshNormalMaterial());
         newObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
         scene.add(newObject);
       }
       hitTestSource.cancel(); // Cleanup the hit test source
    });
  }
});

            

              
                Copy
              
            
          

3. Jõudluse optimeerimine

WebXR-kogemused võivad olla arvutuslikult intensiivsed, eriti mobiilseadmetel. Siin on mõned näpunäited jõudluse optimeerimiseks:

• Vähenda tabamustestide sagedust: Tabamustestide teostamine igas kaadris võib olla kulukas. Kaaluge sageduse vähendamist, eriti kui kasutaja liikumine on aeglane. Saate kasutada taimerit või teostada tabamusteste ainult siis, kui kasutaja algatab toimingu.
• Kasutage piirava mahu hierarhiat (BVH): Kui teil on keeruline stseen paljude objektidega, võib BVH kasutamine märkimisväärselt kiirendada kokkupõrke tuvastamist. Three.js ja Babylon.js pakuvad BVH-rakendusi.
• LOD (detailitase): Kasutage oma 3D-mudelite jaoks erinevaid detailitasemeid sõltuvalt nende kaugusest kaamerast. See vähendab eemalt asuvate objektide renderdamiseks vajalike polügoonide arvu.
• Varjatud objektide eemaldamine (Occlusion Culling): Ärge renderdage objekte, mis on teiste objektide taha peidetud. See võib keerulistes stseenides jõudlust märkimisväärselt parandada.

4. Erinevate referentsruumide käsitlemine

WebXR toetab erinevaid referentsruume, mis defineerivad koordinaatsüsteemi, mida kasutatakse kasutaja positsiooni ja orientatsiooni jälgimiseks. Kõige levinumad referentsruumid on:

• Lokaalne: Koordinaatsüsteemi alguspunkt on fikseeritud kasutaja algpositsiooni suhtes. See sobib kogemusteks, kus kasutaja püsib väikesel alal.
• Põrandaga piiratud: Alguspunkt on põranda tasandil ja XZ-tasand esindab põrandat. See sobib kogemusteks, kus kasutaja saab ruumis ringi liikuda.
• Piiramatu: Alguspunkt ei ole fikseeritud ja kasutaja saab vabalt ringi liikuda. See sobib suuremahulisteks AR-kogemusteks.

Sobiva referentsruumi valimine on oluline tagamaks, et teie WebXR-kogemus töötab erinevates keskkondades korrektselt. XR-seansi loomisel saate taotleda konkreetset referentsruumi.

            
xrReferenceSpace = await xrSession.requestReferenceSpace('bounded-floor');

            

              
                Copy
              
            
          

5. Seadmete ühilduvusega tegelemine

WebXR on suhteliselt uus tehnoloogia ja kõik brauserid ning seadmed ei toeta seda ühtmoodi. Oluline on kontrollida WebXR-i tuge enne WebXR-seansi initsialiseerimist.

            
if (navigator.xr) {
  // WebXR is supported
  initXR();
} else {
  // WebXR is not supported
  console.error('WebXR is not supported in this browser.');
}

            

              
                Copy
              
            
          

Samuti peaksite oma WebXR-kogemust testima erinevatel seadmetel, et veenduda selle korrektses toimimises.

Rahvusvahelistamise kaalutlused

WebXR-rakenduste arendamisel globaalsele publikule on oluline arvestada rahvusvahelistamise (i18n) ja lokaliseerimisega (l10n).

• Tekst ja kasutajaliidese elemendid: Kasutage lokaliseerimisteeki teksti ja kasutajaliidese elementide tõlkimiseks erinevatesse keeltesse. Veenduge, et teie kasutajaliidese paigutus mahutaks erineva pikkusega tekste. Näiteks kipuvad saksa sõnad olema pikemad kui inglise sõnad.
• Mõõtühikud: Kasutage erinevates piirkondades sobivaid mõõtühikuid. Näiteks kasutage enamikus riikides meetreid ja kilomeetreid, kuid Ameerika Ühendriikides ja Ühendkuningriigis jalgu ja miile. Laske kasutajatel valida oma eelistatud mõõtühikud.
• Kuupäeva- ja kellaajavormingud: Kasutage erinevates piirkondades sobivaid kuupäeva- ja kellaajavorminguid. Näiteks kasutage mõnes riigis vormingut AAAA-KK-PP ja teistes KK/PP/AAAA.
• Valuutad: Kuvage valuutasid erinevates piirkondades sobivas vormingus. Kasutage valuutakonversioonide haldamiseks teeki.
• Kultuuriline tundlikkus: Olge teadlik kultuurilistest erinevustest ja vältige piltide, sümbolite või keele kasutamist, mis võivad mõne kultuuri jaoks solvavad olla. Näiteks võivad teatud käežestid omada erinevates kultuurides erinevaid tähendusi.

WebXR-i arendustööriistad ja -ressursid

Mitmed tööriistad ja ressursid saavad teid WebXR-i arendamisel aidata:

• Three.js: Populaarne JavaScripti 3D-teek WebGL-põhiste kogemuste loomiseks.
• Babylon.js: Teine võimas JavaScripti 3D-mootor, mis keskendub WebXR-i toele.
• A-Frame: Veebiraamistik VR-kogemuste loomiseks HTML-i abil.
• WebXR emulaator: Brauseri laiendus, mis võimaldab teil testida WebXR-kogemusi ilma füüsilise VR- või AR-seadmeta.
• WebXR Device API spetsifikatsioon: W3C ametlik WebXR-i spetsifikatsioon.
• Mozilla segareaalsuse blogi: Suurepärane ressurss WebXR-i ja seotud tehnoloogiate kohta õppimiseks.

Järeldus

WebXR Tabamustesti Haldur on võimas tööriist interaktiivsete ja kaasahaaravate AR/VR-kogemuste loomiseks. Mõistes kiirtejälituse ja Tabamustesti API kontseptsioone, saate luua kaasahaaravaid rakendusi, mis võimaldavad kasutajatel virtuaalmaailmaga loomulikult ja intuitiivselt suhelda. Kuna WebXR-tehnoloogia areneb edasi, on uuenduslike ja kaasahaaravate kogemuste loomise võimalused lõputud. Ärge unustage optimeerida oma koodi jõudluse osas ja kaaluda rahvusvahelistamist, kui arendate globaalsele publikule. Võtke vastu väljakutsed ja tasud järgmise põlvkonna kaasahaaravate veebikogemuste loomisel.